<template>
    <div class="page-home">
        <div class="hl">
            <div class="module">
                <el-form ref="formRef" :model="form" :rules="rules" :label-position="'left'" label-width="auto">
                    <div class="mitem">
                        <el-divider content-position="left">微信配置</el-divider>
                        <el-form-item label="小程序APPID" prop="app_id">
                            <el-input v-model="form.app_id" placeholder="请输入" clearable />
                        </el-form-item>
                        <el-form-item label="小程序密钥" prop="app_secret">
                            <el-input v-model="form.app_secret" placeholder="请输入" clearable />
                        </el-form-item>
                        <el-form-item label="支付商户号" prop="mch_id">
                            <el-input v-model="form.mch_id" placeholder="请输入" clearable />
                        </el-form-item>
                        <el-form-item label="支付商户密钥" prop="mch_key">
                            <el-input v-model="form.mch_key" placeholder="请输入" clearable />
                        </el-form-item>
                        <el-button type="primary" @click="save">保存/更新</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const formRef = ref();
const form = reactive({
    app_id: '',
    app_secret: '',
    mch_id: '',
    mch_key: ''
})

const rules = {
    'app_id': [{ required: true, message: '请输入', trigger: 'blur' }],
    'app_secret': [{ required: true, message: '请输入', trigger: 'blur' }],
    'mch_id': [{ required: true, message: '请输入', trigger: 'blur' }],
    'mch_key': [{ required: true, message: '请输入', trigger: 'blur' }]
}

const id = ref('')
async function save(refForm) {
    formRef.value.validate(async (valid) => {
        if (valid) {
            let res = await proxy.$post('SysConfigSave', {
                id: id.value,
                key: 'WECHAT_CONFIG',
                name: '支付配置',
                state: 1,
                content: JSON.stringify(form)
            })
            if (res.code === 0) {
                ElMessage({ type: 'success', message: '保存成功' });
                getDetail()
            }
        }
    });
}



async function getDetail() {
    let res = await proxy.$post('SysConfigDetail', {
        key: 'WECHAT_CONFIG'
    }, false)
    if (res.code === 0) {
        let content = res.data.content ? JSON.parse(res.data.content) : {
            app_id: '',
            app_secret: '',
            mch_id: '',
            mch_key: ''
        }
        id.value = res.data.id || ''
        Object.assign(form, content);
    }

}


onMounted(() => {
    getDetail()
});

</script>


<style lang="scss" scoped>
.page-home {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;

    .hr {
        width: 375px;

    }

    .hl {
        flex: 1;

        .module {
            padding: 20px;
            padding-top: 0;
        }
    }


}
</style>